<template>
  <div class="page-grey fiexd">
    <div class="top">
      <span @click="$router.back()">
        <svg-icon icon-class="back" class="icon" />
      </span>
      <span class="center">添加银行卡</span>
    </div>
    <p class="pmt">请绑定持卡人本人的人银行卡</p>
    <van-form @submit="onSubmit">
      <van-field
        v-model="form.name"
        name="name"
        label="持卡人"
        placeholder="银行卡姓名"
        :rules="[{ required: true, message: '请输入银行卡姓名' }]"
      />
      <van-field
        v-model="form.cardNum"
        name="cardNum"
        label="银行卡号"
        placeholder="银行卡号"
        :rules="[{ required: true, message: '请输入银行卡号' }]"
      />
      <div style="margin: 16px;">
        <van-button class="big-btn" block native-type="submit">
          下一步
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: null,
        cardNum: null
      }
    };
  },
  methods: {
    onSubmit(values) {
      console.log("submit", values);
      this.$toast.success("添加成功");
      this.$router.back();
    }
  }
};
</script>

<style lang="scss" scoped>
.pmt {
  color: #737373;
  margin: 15px 20px;
}
</style>
